<template>
	<view class="">
		<!-- 背景 -->
		<view class="bcg" :style="{ top: top + 'px' }">
			<image src="/static/bbcg.png" mode=""></image>
		</view>
		<!-- 导航栏 会变化 -->
		<view class="navbar">
			<uni-nav-bar
				:title="navbar.title"
				:color="navbar.navColor"
				:statusBar="true"
				:background-color="navbar.navBgColor"
				@clickLeft="$pageBack()"
				left-icon="left"
				:border="false"
			></uni-nav-bar>
			<view class="navbar_tab" v-if="navbar.isshowtabbar">
				<view
					class="nav_item"
					v-for="(item, index) in navbar.tabbarList"
					:key="index"
					@click="scrollToAnchor(item.anchorId, index)"
					:class="{ active: navbar.activeTabIndex === index }"
				>
					{{ item.name }}
				</view>
			</view>
		</view>
		<view class="content">
			<view class="top_img">
				<image class="img1" :src="dataInfo.imgFace" mode="aspectFill"></image>
				<view class="img_ads">
					<view class="tit">{{ dataInfo.name }}</view>
					<view class="cont">
						<image :src="dataInfo.imgFace" mode="aspectFill"></image>
						<view class="right_cont">
							<view class="tip flex">
								<view class="t1">{{ dataInfo.type }}</view>
								<view class="t2" v-if="dataInfo.sign == '1'">签到</view>
								<view class="t2">{{ dataInfo.lineType == 1 ? '线上' : '线下' }}</view>
							</view>
							<view class="user flex" v-if="dataInfo.createUser">
								<image v-if="dataInfo.createUser.img" :src="dataInfo.createUser.img" mode="aspectFill"></image>
								<image v-else src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/head.png" mode="aspectFill"></image>
								<view class="">{{ dataInfo.createUser.name }}</view>
							</view>
							<view class="tips flex">
								<image src="/static/i2.png" mode=""></image>
								<view class="" v-if="dataInfo.beginTime">{{ $formatDateTime(dataInfo.beginTime) }}</view>
							</view>
							<view class="tips flex" v-if="dataInfo.lineType == 1">
								<image src="/static/i3.png" mode=""></image>
								<view class="">{{ dataInfo.platform }}</view>
							</view>
							<view class="tips flex" v-else @click="$opennavigation(dataInfo)">
								<image src="/static/i1.png" mode=""></image>
								<view class="ts">{{ dataInfo.addressInfo }}</view>
								<uni-icons type="right" size="16" color="#fff"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="block">
				<view class="tit_flex flex_jc_sb">
					<view class="tit">内容简介</view>
					<view class="tit_right flex" @click="$pageGo(`/pages/activity/introduction?obj=` + encodeURIComponent(JSON.stringify(dataInfo)))">
						<view class="">查看更多</view>
						<uni-icons type="right" size="16" color="#75613E"></uni-icons>
					</view>
				</view>
				<view class="text">
					{{ dataInfo.info }}
				</view>
			</view>

			<view class="block">
				<view class="tit_flex flex_jc_sb">
					<view class="tit">注意事项</view>
					<view class="tit_right flex" @click="$pageGo(`/pages/activity/introduction?obj=` + encodeURIComponent(JSON.stringify(dataInfo)))">
						<view class="">查看更多</view>
						<uni-icons type="right" size="16" color="#75613E"></uni-icons>
					</view>
				</view>
				<view class="text">
					{{ dataInfo.remark }}
				</view>
			</view>

			<view class="block_1" id="b_1">
				<view class="top_title flex_jc_sb">
					<view class="top_left">成员列表</view>
					<view class="top_right">
						<view class="tests">{{ dataInfo.signUserList?.length }}/{{ dataInfo.maxCount }} 人报名</view>
						<!-- 	<view class="tests" style="margin-left: 20rpx;">
							查看
						</view> -->
					</view>
				</view>
				<view class="block_content">
					<view class="buser flex_jc_sb">
						<view class="buser_left flex">
							<view class="">
								<view class="b1 flex_jc_cent" v-if="dataInfo.emceeUser">
									<image v-if="dataInfo.emceeUser.img" class="img2" :src="dataInfo.emceeUser.img" mode="aspectFill"></image>
									<image v-else class="img2" src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/head.png" mode=""></image>
								</view>
								<view class="b1 flex_jc_cent" v-else>
									<image class="img1" src="/static/ht.png" mode=""></image>
								</view>
							</view>
							<view class="b_rig">
								<view class="t1" style="color: #75613e" v-if="dataInfo.emceeUser">{{ dataInfo.emceeUser.name }}</view>
								<view class="t1" v-else>虚位以待...</view>
								<view class="b2 flex_jc_cent">
									<image src="/static/ht1.png" mode=""></image>
									主持人
								</view>
							</view>
						</view>
						<view class="" v-if="dataInfo.activitySign?.sign == '1'">
							<view class="buser_right" v-if="dataInfo.emceeUser == null" @click="childRef.openzhuchi()">成为主持人</view>
						</view>

						<view class="" v-if="isvoteInfo">
							<view class="buser_right" @click="$pageGo(`/pages/activity/person?id=${dataInfo.id}`)">投选发言者</view>
						</view>
					</view>
					<view class="imgList" v-if="navbar.signUserList?.length != 0">
						<view class="items" v-for="(item, index) in navbar.signUserList" :key="index">
							<image class="img" v-if="item.img" :src="item.img" mode="aspectFill"></image>
							<image class="img" v-else src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/head.png" mode="aspectFill"></image>
							<image class="asdimg" v-if="item.isSpeaker && navbar.voteTimeEnd" src="/static/fy.png" mode=""></image>
							<view class="tts">{{ item.name }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="block_1" id="b_2">
				<view class="top_title flex_jc_sb">
					<view class="top_left">活动合影</view>
					<view class="top_right_text flex">
						<image src="/static/hua.png" mode=""></image>
						<span>{{ dataInfo.endImg ? '感谢大家的参加' : '等待分社长上传中...' }}</span>
					</view>
				</view>
				<view class="block_content">
					<view class="block_2_cont">
						<image v-if="dataInfo.endImg" :src="dataInfo.endImg" mode="aspectFill" show-menu-by-longpress></image>
						<image v-else src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/upbcg.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="block_1" id="b_3">
				<view class="top_title flex_jc_sb">
					<view class="top_left">活动群聊</view>
					<view class="top_right_text flex">
						<image src="/static/hua.png" mode=""></image>
						报名后，即可查看活动群二维码
					</view>
				</view>
				<view class="block_content">
					<view class="block_3_cont flex_jc_cent">
						<image :src="dataInfo.imgQr" mode="aspectFill" show-menu-by-longpress></image>
						<view class="ads" v-if="!dataInfo.activitySign || dataInfo.activitySign?.supplement == '1'"></view>
					</view>
				</view>
			</view>
			<view class="block_1" id="b_4">
				<view class="top_title flex_jc_sb">
					<view class="top_left">活动流程</view>
					<view class="top_right_text flex">
						<image src="/static/hua.png" mode=""></image>
						活动流程，帮助大家尽快了解
					</view>
				</view>
				<view class="block_content">
					<view class="block_4_cont">
						<view class="title">1.报名主持人</view>
						<view class="subtitle">欢迎每一位稻友成为主持人</view>
						<view class="ttt">主持人不需要额外准备，在现场引导流程、把控时间与主题、应对突发状况等</view>
					</view>
					<view class="block_4_cont">
						<view class="title">2.自我介绍</view>
						<view class="subtitle">从主持人开始，每人约3分钟，超时主持人需提醒</view>
						<view class="ttt">可介绍昵称、阅读偏好、所在行业、兴趣爱好和参与初衷等，快速认识彼此</view>
					</view>
					<view class="block_4_cont">
						<view class="title">3.主题分享</view>
						<view class="subtitle">每人5-8分钟，包括但不限于：心得体会、感受想法、联系实际生活与工作谈谈影响启发以及未来具体的实践应用等</view>
						<view class="ttt">主持人控场控时，全部发言完毕后再开放讨论</view>
					</view>
					<view class="block_4_cont">
						<view class="title">4.自由交流</view>
						<view class="subtitle">围绕主题畅所欲言、交流自己的问题或疑问，可适度延展</view>
						<view class="ttt">主持人适度引导，避免偏题，鼓励每位稻友参与</view>
					</view>
					<view class="block_4_cont">
						<view class="title">5.合影留念</view>
						<view class="subtitle">活动结束一起拍照留念，珍藏这段美好回忆</view>
						<view class="ttt">合照会做卡通处理，保护隐私，合照发给分社长，由分社长上传至小程序</view>
					</view>
					<view class="block_4_cont">
						<view class="title">6.投选"最佳发言人"</view>
						<view class="subtitle">活动后可在小程序将你心中本场最精彩的分享者投选为“最佳发言人”</view>
					</view>
					<view class="bbb flex_jc_sb">
						<view class="t1">报名与须知</view>
						<view class="top_right_text flex">
							<image src="/static/hua.png" mode=""></image>
							报名后，即可查看活动群二维码
						</view>
					</view>
					<view class="block_5_cont">
						<view class="itemss">
							<view class="lefts flex">
								<image src="/static/h1.png" mode=""></image>
								<view class="">加入活动群组</view>
							</view>
							<view class="ttts">请扫描二维码进入活动群，所有具体通知和变动将在群内及时发布</view>
						</view>
						<view class="itemss">
							<view class="lefts flex">
								<image src="/static/h2.png" mode=""></image>
								<view class="">准时参与</view>
							</view>
							<view class="ttts">请提前安排好时间准时出席，如临时无法参加请及时取消报名，以便名额留给他人。签到类活动将按积分规则处理</view>
						</view>
						<view class="itemss">
							<view class="lefts flex">
								<image src="/static/h5.png" mode=""></image>
								<view class="">带人需确认</view>
							</view>
							<view class="ttts">为保证活动质量，请勿空降；如需带朋友参加，须提前联系管理员确认并登记</view>
						</view>
						<view class="itemss">
							<view class="lefts flex">
								<image src="/static/h3.png" mode=""></image>
								<view class="">共创友好环境</view>
							</view>
							<view class="ttts">为避免影响体验，请勿讨论政治、宗教等敏感话题，严禁一切推销、骚扰及引流行为。违规者将可能被取消参与资格</view>
						</view>
						<view class="itemss">
							<view class="lefts flex">
								<image src="/static/h4.png" mode=""></image>
								<view class="">支持场地伙伴</view>
							</view>
							<view class="ttts">活动场地多由友好咖啡馆、书店等提供，请大家自觉消费，共同感谢伙伴的支持</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_login">
			<image src="/static/blogin.png" mode=""></image>
			<view class="text" @click="$pageGo('/pages/index/webview')">
				点击关注公众号
				<text >【稻浪同歌共耕社】</text>
				让生活在这里发生~
			</view>
		</view>
		<view class="" v-if="dataInfo.createUser">
			<activityBtn ref="childRef" :dataInfo="dataInfo" @refesh_info="getInfo"></activityBtn>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick } from 'vue';
import { onLoad, onShow, onPageScroll, onPullDownRefresh, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
import { getActivityInfo, activitySignSpeakList } from '@/api/activity.js';
import { getConfig } from '@/api/login.js';

const childRef = ref(null);
// 背景位置计算（单位统一为rpx）
const statusBarHeight = uni.getStorageSync('statusBarHeight') || 0;
const top = statusBarHeight + 360; // 1px = 2rpx（适配rpx单位）
const navbar = reactive({
	voteTimeEnd: false,
	signUserList: [],
	title: '',
	navColor: '#fff',
	navBgColor: 'transparent',
	topImgHeight: -1,
	tabbarList: [
		{ name: '成员列表', anchorId: 'b_1' }, // 对应id="b_1"
		{ name: '活动合影', anchorId: 'b_2' }, // 对应id="b_2"
		{ name: '活动群聊', anchorId: 'b_3' }, // 对应id="b_3"
		{ name: '活动流程', anchorId: 'b_4' } // 对应id="b_4"
	],
	isshowtabbar: false,
	activeTabIndex: 0, // 记录当前高亮的tab索引（默认第一个）
	totalNavHeight: 0 // 假设导航栏高度是44px
});
const scrollTop = ref(0);
const anchorPositions = ref({});
const instance = getCurrentInstance();
const updateAnchorPositions = () => {
	if (!instance) return;
	const query = uni.createSelectorQuery().in(instance.proxy);
	query
		.select('.navbar')
		.boundingClientRect((data) => {
			if (data) {
				navbar.totalNavHeight = data.height + 40;
			}
		})
		.exec();
	// 1. 更新顶部图片高度
	query
		.select('.top_img')
		.boundingClientRect((data) => {
			if (data) {
				navbar.topImgHeight = data.height;
			}
		})
		.exec();

	// 2. 更新所有锚点位置
	// 创建一个新的查询实例，避免和上面的查询冲突
	const anchorQuery = uni.createSelectorQuery().in(instance.proxy);
	navbar.tabbarList.forEach((item) => {
		anchorQuery.select(`#${item.anchorId}`).boundingClientRect((data) => {
			if (data) {
				// 关键修正：
				// data.top 是元素在视口中的位置
				// scrollTop.value 是页面当前滚动的距离
				// 两者相加，才是元素距离整个页面顶部的真实距离
				const realTop = data.top + scrollTop.value;
				anchorPositions.value[item.anchorId] = {
					top: realTop,
					height: data.height
				};
			}
		});
	});
	anchorQuery.exec();
};
const scrollToAnchor = (anchorId, index) => {
	// 使用 nextTick 确保 anchorPositions 已更新
	nextTick(() => {
		const targetPos = anchorPositions.value[anchorId];
		if (targetPos) {
			// 计算最终滚动位置：锚点顶部 - 导航栏高度 - 一些额外的边距
			const finalScrollTop = targetPos.top - navbar.totalNavHeight - 10; // 减去20rpx的边距，避免太贴边
			uni.pageScrollTo({
				scrollTop: finalScrollTop,
				duration: 300
			});
		}
	});
};
onPageScroll((e) => {
	scrollTop.value = e.scrollTop;

	// 更新导航栏样式
	if (scrollTop.value >= navbar.topImgHeight - navbar.totalNavHeight) {
		navbar.title = '活动详情';
		navbar.navColor = '#000';
		navbar.navBgColor = '#ECE6D5';
		navbar.isshowtabbar = true;
	} else {
		navbar.title = '';
		navbar.navColor = '#fff';
		navbar.navBgColor = 'transparent';
		navbar.isshowtabbar = false;
	}

	// 滚动时更新tab高亮
	// 从后往前遍历，确保优先匹配最下方的可见锚点
	for (let i = navbar.tabbarList.length - 1; i >= 0; i--) {
		const anchorId = navbar.tabbarList[i].anchorId;
		const anchorPos = anchorPositions.value[anchorId];
		if (anchorPos) {
			// 当锚点顶部进入视口（减去导航栏和边距），则高亮对应的tab
			if (scrollTop.value >= anchorPos.top - navbar.totalNavHeight - 50) {
				navbar.activeTabIndex = i;
				break;
			}
		}
	}
});
const dataInfo = reactive({
	beginTime: ''
});
const ID = ref(0);
const isvoteInfo = ref(false); //能不能 进行投票
const getInfo = () => {
	getActivityInfo({ id: ID.value }).then((res) => {
		if (res.code == 200) {
			Object.assign(dataInfo, res.data);
			isvoteInfo.value = canVote(res.data.voteTimeBegin, res.data.voteTimeEnd);
			nextTick(() => {
				updateAnchorPositions();
				uni.stopPullDownRefresh();
			});
		}
	});
};
const canVote = (voteTimeBegin, voteTimeEnd) => {
	const now = new Date().getTime();
	const start = new Date(voteTimeBegin.replace(' ', 'T')).getTime();
	const end = new Date(voteTimeEnd.replace(' ', 'T')).getTime();

	return now >= start && now <= end;
};
onLoad((option) => {
	ID.value = option.id;
	getInfo();

	uni.$once('changeGetList', function () {
		getInfo();
	});
});
onShow(() => {
	activitySignSpeakList({ id: ID.value }).then((res) => {
		if (res.code == 200) {
			navbar.voteTimeEnd = res.data.voteTimeEnd;
			navbar.signUserList = res.data.signUserList.map((user) => {
				return {
					...user,
					// 判断是否是发言者
					isSpeaker: res.data.kingUserIdList.includes(user.id)
				};
			});
		}
	});
});

onPullDownRefresh(() => {
	getInfo();
});
// 分享
onShareAppMessage(() => ({
	title: dataInfo.name,
	imageUrl: dataInfo.imgFace,
	path: `pages/activity/info?id=${dataInfo.id}`
}));

onShareTimeline(() => ({
	title: dataInfo.name,
	imageUrl: dataInfo.imgFace,
	path: `pages/activity/info?id=${dataInfo.id}`
}));
</script>
<style lang="scss">
page {
	background: #f7f8f6;
}
.bcg {
	width: 668rpx;
	height: 972rpx;
	position: fixed;
	right: 0%;
	top: 300rpx;
	z-index: 1;
	image {
		width: 668rpx;
		height: 972rpx;
	}
}
.navbar {
	position: fixed;
	z-index: 99;
	width: 100%;
	transition: background-color 0.3s ease, height 0.3s ease;
	.navbar_tab {
		width: 100%;
		height: 80rpx;
		background: #ece6d5;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		display: flex;
		justify-content: space-between;
		.nav_item {
			width: 25%;
			text-align: center;
			line-height: 80rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #8f8f8b;
		}
		.active {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #75613e;
		}
	}
}
.content {
	.top_img {
		position: relative;
		width: 100%;
		height: 520rpx;
		padding-bottom: 40rpx;
		overflow: hidden;
		z-index: 2;
		.img1 {
			width: 100%;
			height: 520rpx;
		}
		.img_ads {
			position: absolute;
			top: 0%;
			width: 100%;
			height: 520rpx;
			background: rgba(0, 0, 0, 0.5);
			.tit {
				position: absolute;
				bottom: 240rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 40rpx;
				color: #ffffff;
				left: 20rpx;
				width: 710rpx;
			}
			.cont {
				position: absolute;
				bottom: -30rpx;
				left: 20rpx;
				display: flex;
				image {
					width: 180rpx;
					height: 244rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}
				.right_cont {
					margin-left: 20rpx;
					flex: 1;
					.tip {
						.t1 {
							padding: 0rpx 6rpx;
							height: 32rpx;
							background: #b19561;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #ffffff;
							line-height: 32rpx;
							margin-right: 10rpx;
							text-align: center;
						}
						.t2 {
							padding: 0rpx 6rpx;
							height: 28rpx;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #ffffff;
							line-height: 28rpx;
							border: 1px solid #ffffff;
							margin-right: 10rpx;
							text-align: center;
						}
					}
					.user {
						margin-top: 20rpx;
						image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
							border-radius: 16rpx;
						}
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #ffffff;
					}
					.tips {
						margin-top: 16rpx;
						image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
							border-radius: 16rpx;
						}
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #ffffff;
						.ts {
							width: 440rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}
	}
	.block {
		width: 710rpx;
		height: 220rpx;
		background: rgba(243, 243, 237, 0.5);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 1px solid #d8c6a7;
		padding: 22rpx 20rpx;
		box-sizing: border-box;
		margin: 20rpx auto 30rpx;
		position: relative;
		z-index: 2;
		.tit_flex {
			.tit {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #75613e;
			}
			.tit_right {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #75613e;
			}
		}
		.text {
			margin-top: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #8f8f8b;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3; //几行就填几
			-webkit-box-orient: vertical;
		}
	}

	.block_1 {
		position: relative;
		z-index: 2;
		.top_title {
			.top_left {
				width: 200rpx;
				height: 60rpx;
				background: linear-gradient(270deg, #f5f5f0 0%, #eee8d8 100%);
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #75613e;
				line-height: 60rpx;
				border-left: 4rpx solid #75613e;
				padding-left: 30rpx;
			}
			.top_right_text {
				padding-right: 20rpx;
				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #8f8f8b;
			}
			.top_right {
				display: flex;
				align-items: center;
				padding-right: 20rpx;
				height: 36rpx; /* 头像高度 */
				line-height: 36rpx;
				.tests {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #8f8f8b;
					margin-left: 8rpx;
				}
			}
		}
		.block_content {
			width: 710rpx;
			margin: 20rpx auto;
			.buser {
				.buser_left {
					.b1 {
						width: 100rpx;
						height: 100rpx;
						background: #ede6d8;
						border-radius: 50rpx;
						.img1 {
							width: 32rpx;
							height: 60rpx;
						}
						.img2 {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50rpx;
						}
					}
					.b_rig {
						margin-left: 20rpx;
						.t1 {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 32rpx;
							color: #8f8f8b;
						}
						.b2 {
							margin-top: 12rpx;
							width: 100rpx;
							height: 32rpx;
							background: #ede6d8;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							border: 1px solid #75613e;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #75613e;
							image {
								width: 24rpx;
								height: 24rpx;
							}
						}
					}
				}
				.buser_right {
					width: 180rpx;
					height: 48rpx;
					background: #d8c6a7;
					border-radius: 70rpx 70rpx 70rpx 70rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #75613e;
					text-align: center;
					line-height: 48rpx;
				}
			}

			.imgList {
				display: flex;
				flex-wrap: wrap;
				margin-top: 10rpx;
				.items {
					width: 100rpx;
					text-align: center;
					margin: 20rpx 0rpx 0rpx;
					margin-right: 48rpx;
					position: relative;
					.tts {
						width: 100%;
						text-align: center;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #75613e;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.img {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50rpx;
					}
					.asdimg {
						width: 128rpx;
						height: 128rpx;
						position: absolute;
						top: -18rpx;
						left: -14rpx;
					}
				}
				.items:nth-child(5n) {
					margin-right: 0rpx;
				}
			}
			.block_2_cont {
				width: 710rpx;
				height: 360rpx;
				margin: 20rpx auto;
				image {
					width: 710rpx;
					height: 360rpx;
					border-radius: 20rpx;
				}
			}
			.block_3_cont {
				width: 360rpx;
				height: 360rpx;
				margin: 20rpx auto;
				position: relative;
				image {
					display: block;
					width: 360rpx;
					height: 360rpx;
					border-radius: 20rpx;
				}
				.ads {
					position: absolute;
					top: 0%;
					width: 360rpx;
					height: 360rpx;
					backdrop-filter: blur(5px);
					border-radius: 20rpx;
				}
			}

			.block_4_cont {
				width: 710rpx;
				background: #ffffff;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				margin: 20rpx auto;
				position: relative;
				z-index: 97;
				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #75613e;
				}
				.subtitle {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #75613e;
					margin-top: 20rpx;
				}
				.ttt {
					width: 670rpx;
					background: #f7f7f7;
					border-radius: 20rpx;
					padding: 20rpx;
					box-sizing: border-box;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #8f8f8b;
					margin-top: 10rpx;
				}
			}
			.bbb {
				width: 710rpx;
				height: 60rpx;
				background: linear-gradient(270deg, #f5f5f0 0%, #eee8d8 100%);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin: 40rpx auto;
				padding: 0rpx 20rpx;
				box-sizing: border-box;
				.t1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #75613e;
				}
				.top_right_text {
					padding-right: 20rpx;
					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #8f8f8b;
				}
			}
			.block_5_cont {
				width: 710rpx;
				background: #ffffff;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				position: relative;
				z-index: 97;
				.itemss {
					margin-bottom: 20rpx;
					padding-bottom: 20rpx;
					border-bottom: 1px solid #e5ded1;
					.lefts {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #75613e;
						image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
						}
					}
					.ttts {
						margin-top: 10rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #8f8f8b;
					}
				}
				.itemss:last-child {
					border: none;
					margin: 0rpx;
				}
			}
		}
	}
}
.bottom_login {
	text-align: center;
	margin: 50rpx auto;
	padding-bottom: 1rpx;
	position: relative;
	z-index: 2;
	image {
		width: 204rpx;
		height: 64rpx;
	}
	.text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #8f8f8b;
		text-align: center;
		margin-top: 10rpx;
		text {
			color: #75613e !important;
		}
	}
}
</style>
